var AttendanceStatItem = function () {
  var template = /* html */ `
    <div class="attendance-stat-item">
      <table cellspacing="0" cellpadding="0">
        <colgroup>
          <col width="100">
          <col width="100">
          <col width="100">
          <col width="100">
          <col width="100">
          <col width="100">
          <col width="100">
          <col width="100">
        </colgroup>
        <thead>
          <tr style="height:30px">
            <th>请假次数最多</th>
            <th>请假时长最长</th>
            <th>补卡次数最多</th>
            <th>迟到次数最多</th>
            <th>迟到时长最长</th>
            <th>早退次数最多</th>
            <th>早退时长最长</th>
            <th>打卡异常职工</th>
          </tr>
        </thead>
        <tbody>
          <tr style="height:40px">
            <td>
              <scroll-text :text-list="attendanceData.leaveTimesMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{scope.text.maximum}}次)</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.leaveDurationMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{getTimeStr(scope.text.maximum)}})</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.fillcardTimesMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{scope.text.maximum}}次)</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.lateTimesMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{scope.text.maximum}}次)</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.lateDurationMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{getTimeStr(scope.text.maximum)}})</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.earlyTimesMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{scope.text.maximum}}次)</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.earlyDurationMaximumPerson">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}({{getTimeStr(scope.text.maximum)}})</span>
                </template>
              </scroll-text>
            </td>
            <td>
              <scroll-text :text-list="attendanceData.abnormalAttendanceData">
                <template slot-scope="scope">
                  <span>{{scope.text.userName}}</span>
                </template>
              </scroll-text>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    props: {
      attendanceData: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {};
    },

    methods: {
      getTimeStr: function (time) {
        var timeMoment = moment.duration(time);
        var hour = timeMoment.asHours();
        hour = Math.floor(hour);
        var minute = timeMoment.minutes();
        if (hour === 0) {
          return `${minute}分`;
        }

        if (minute === 0) {
          return `${hour}小时`;
        }
        return `${hour}小时${minute}分钟`;
      }
    },

    components: {
      ScrollText: ScrollText
    },

    template: template
  };
}();